<route>
{
meta: {
title: '教学实验室预约'
}
}
</route>

<template>
  <div class="app-container"
       style="margin-left: 20px; margin-right: 20px;margin-top: 35px;">
    <!-- style="margin-left: 20px;margin-top: 20px;" -->

    <el-row>
      <el-col :span="24">
        <el-form ref="queryFormRef"
                 :model="queryParams"
                 :inline="true"
                 label-width="90px">
          <el-form-item label="实验室名称"
                        prop="lab_site">
            <el-input v-model="queryParams.lab_site"
                      placeholder="请输入实验室名称"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="实验室类型"
                        prop="lab_type">
            <el-input v-model="queryParams.lab_type"
                      placeholder="请输入实验室类型"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       :icon="Search"
                       round
                       plain
                       @click="handleQuery">
              搜索
            </el-button>
            <el-button :icon="Refresh"
                       round
                       plain
                       @click="resetQuery">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-divider>
      <el-icon>
        <star-filled />
      </el-icon>
    </el-divider>
    <el-table :data="labList">
      <el-table-column fixed=""
                       type="index"
                       label="序号"
                       :index="pageNum" />
      <el-table-column prop="lab_site"
                       label="实验室名称" />

      <el-table-column label="实验室类型"
                       prop="lab_type" />

      <el-table-column prop="lab_size"
                       label="实验室容量" />

      <el-table-column prop="lab_size"
                       label="空闲容量" />

      <el-table-column prop="lab_describe"
                       label="实验室描述" />

      <el-table-column fixed="right"
                       label="操作"
                       width="120">
        <template #default="scope">
          <el-button size="small"
                     type="success"
                     plain
                     @click="handleDetails(scope.row)">
            预约详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="page.total > 0"
                :total="page.total"
                v-model:page="page.pageNum"
                v-model:limit="page.pageSize"
                @pagination="getList" />
    <!-- 查看预约详情-->
    <el-dialog v-model="operForm.open"
               title="预约详情"
               width="1000px"
               append-to-body>
      <div style="margin-left: 60px;">
        <el-row>
          <el-col>
            <el-date-picker v-model="riqi"
                            placeholder="请选择日期"
                            type="date"
                            format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD"
                            :disabledDate='pickerOptions' />
            <el-button type="primary"
                       :icon="Search"
                       plain
                       @click="submitAppointment()">
              查 看
            </el-button>
          </el-col>
          <el-col v-for="(item,i) in appointment"
                  :key="item"
                  :span="4">
            <el-button v-if="item==1||item==2"
                       type="danger"
                       disabled
                       class="edit_btn"
                       @click="checkAppointment(options[i].value)">
              {{ options[i].label }}<br>已预约
            </el-button>
            <el-button v-else-if="item==0"
                       type="success"
                       class="edit_btn"
                       plain
                       @click="checkAppointment(options[i].value)">
              {{ options[i].label }}<br>未预约,点击预约
            </el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <!-- 确认预约信息表单 -->
    <el-dialog v-model="operForm.addAppointmentOpen"
               title="确认预约信息"
               width="500px"
               append-to-body>
      <el-form ref="queryFormRef"
               :model="operForm.addAppointment"
               label-width="100px">
        <el-form-item label="实验室名称"
                      prop="lab_site">
          <el-input v-model="operForm.lab_site" />
        </el-form-item>
        <el-form-item label="实验室类型"
                      prop="appointment_type">
          <el-input v-model="operForm.addAppointment.appointment_type"
                    placeholder="请输入实验室类型" />
        </el-form-item>

        <el-form-item label="预约人"
                      prop="appointment_user">
          <el-input v-model="operForm.addAppointment.appointment_user"
                    placeholder="请输入实验室容量" />
        </el-form-item>
        <el-form-item label="预约时间"
                      prop="lab_describe">
          <el-input v-model="operForm.addAppointment.appointment_time"
                    placeholder="预约时间" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary"
                     @click="submitAddAppointment()">
            确 定
          </el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {
  StarFilled,
  Edit,
  Share,
  Delete,
  Search,
  Upload,
  Refresh,
  Plus,
  User,
} from '@element-plus/icons-vue'
import {
  defineComponent,
  onMounted,
  reactive,
  toRef,
  ref,
  computed,
  toRefs,
  getCurrentInstance,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'

const labList = ref([])
const loading = ref(true)
const queryFormRef = ref(null)
const open = ref(false)
const title = ref('')
const pageNum = ref(1)
const total = ref(0)
const riqi = ref(null)
const shijian = ref(null)
// 查询预约信息
const appointment = ref([0, 0, 0, 0])
// 日期选择
const options = [
  {
    value: '08:00:00',
    label: '08:00:00-10:00:00',
  },
  {
    value: '10:00:00',
    label: '10:00:00-12:00:00',
  },
  {
    value: '14:00:00',
    label: '14:00:00-16:00:00',
  },
  {
    value: '16:00:00',
    label: '16:00:00-18:00:00',
  },
]

/** 增加或修改表单数据 */
const operForm = ref({
  // 俩个表单控件
  open: false,
  addAppointmentOpen: false,
  lab_site: undefined,
  // 添加预约信息
  addAppointment: {
    id: undefined,
    lab_id: undefined,
    appointment_time: undefined,
    appointment_user: undefined,
    appointment_type: undefined,
    appointment_flag: 1,
  },
})

/** 查询条件 */
const queryParams = ref({
  lab_site: undefined,
  lab_type: '教学',
  use_flag: '1',
})
const page = ref({
  total: 1,
  currentpage: 1,
  pagesize: 10,
  pageNum: 1,
})
/** 获取表单数据*/
const getList = () => {
  loading.value = true
  console.log(queryParams.value)
  api
    .post('lab/selectLab/' + page.value.pageNum, queryParams.value)
    .then((res: { data: any }) => {
      page.value.total = res.data.total
      page.value.pagesize = res.data.pageSize
      loading.value = false
      labList.value = res.data.list
      console.log('tableData=', labList.value)
    })
}

/** 搜索按钮操作 */
function handleQuery() {
  pageNum.value = 1
  getList()
}
//限制日期选择
const pickerOptions = (time: Record<string, any>): boolean => {
  let curDate = new Date().getTime() //  获取当前时间点
  let seven = 7 * 24 * 60 * 60 * 1000 // 设定7天日期  7天 * 24小时 * 60分钟 * 60秒 * 1000 = 7天的时间戳
  let sevenDays = curDate + seven //  当前时间点后的七天所处的日期
  return time.getTime() < Date.now() || time.getTime() > sevenDays + 8.64e7 // 8.64e7 表示一天，明天之前包括明天不可选，只可选七天
  }

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
/** 详情按钮操作 */
const handleDetails = (row: { lab_site: any; id: any; lab_type: any }) => {
  // const id = row.id
  // 添加预约信息前置参数
  operForm.value.lab_site = row.lab_site
  operForm.value.addAppointment.lab_id = row.id
  operForm.value.addAppointment.appointment_type = row.lab_type
  operForm.value.addAppointment.appointment_user =
    localStorage.getItem('account')
  operForm.value.open = true
  title.value = '添加实验室'
  riqi.value = getDay(1)
  shijian.value = '08:00:00'
  submitAppointment()
}
/** 查看每天的预约信息*/
const submitAppointment = () => {
  const lab_id = operForm.value.addAppointment.lab_id
  const appointment_time = riqi.value + ' ' + shijian.value
  operForm.value.addAppointment.appointment_time = appointment_time
  api
    .post('labAppointment/selectLabDetails', { lab_id, appointment_time })
    .then((res: { data: any }) => {
      appointment.value = res.data
    })
}
// 核查预约信息
const checkAppointment = (row: string) => {
  shijian.value = row
  const appointment_time = riqi.value + ' ' + shijian.value
  operForm.value.addAppointment.appointment_time = appointment_time
  operForm.value.addAppointmentOpen = true
}

/** 提交预约表单 */
const submitAddAppointment = () => {
  api
    .post('labAppointment/addAppointment', operForm.value.addAppointment)
    .then((res: any) => {
      ElMessage.success('预约成功，等待审核...........')
      operForm.value.addAppointmentOpen = false
      operForm.value.open = false
      // handleDetails(operForm.value.addAppointment.lab_id)
    })
}

/** 取消按钮 */
function cancel() {
  operForm.value.addAppointmentOpen = false
  open.value = false
}
/** 获取日期 */
// 7天后日期
function getDay(day: number) {
  var today = new Date()
  // 也很简单
  var strtime = new Date()
  var date = new Date(strtime) // 传入一个时间格式，如果不传入就是获取现在的时间了，这样做不兼容火狐。
  var time2 = date.valueOf()
  var targetday_milliseconds = time2 + 1000 * 60 * 60 * 24 * day

  today.setTime(targetday_milliseconds) // 注意，这行是关键代码

  var tYear = today.getFullYear()
  var tMonth = today.getMonth()
  var tDate = today.getDate()
  tMonth = doHandleMonth(tMonth + 1)
  tDate = doHandleMonth(tDate)
  return tYear + '-' + tMonth + '-' + tDate
}
function doHandleMonth(month: string | number) {
  var m = month
  if (month.toString().length == 1) {
    m = '0' + month
  }
  return m
}

getList()
</script>
<style scoped>
.edit_btn {
  min-height: 90px;
  max-width: 150px;
}
</style>
